<template>
	<view>
		<image class="top-bg" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vipdetail-bg.png"></image>
		<view class="top-box">
			<image class="top-box-bg" :src="vipColor[vip_id-1].imgUrl"></image>
			<view class="top-text-box">
				<view style="padding: 30rpx;font-size: 39rpx;color: white;" @click="quanyi">
					{{vipDeatil.name}}
					<text class="card-line">|</text><text class="card-text">查看会员权益</text>
					<u-icon name="arrow-right" size="32" color="#FFD4BE"></u-icon>
				</view>
				<view style="display: flex;align-items: center;padding: 20rpx 30rpx 20rpx 30rpx;justify-content: space-between;">
					<view style="color: white;">
						<view style="font-size: 40rpx;color: white;">
							￥<text style="font-size: 60rpx;">{{vipDeatil.money}}</text>
						</view>
						<view style="font-size: 27rpx;">{{vipDeatil.describe}}</view>
					</view>

				</view>
				<view class="vip-tips-bottom" :style="{color: vipColor[vip_id-1].color}">
					<view>开通{{vipDeatil.name}}轻松洗衣</view>
					<view>{{vipDeatil.is_open ? '已开通' : '待开通'}}</view>
				</view>
			</view>

		</view>

		<view class="cont-box">
			<view class="cont-list">
				<view style="color: #8A8A8A;">有效期限</view>
				<view>{{vipDeatil.start_time}}至{{vipDeatil.end_time}}</view>
			</view>
			<view class="cont-list">
				<view style="color: #8A8A8A;">支付金额</view>
				<view style="color: #FF9244;">￥{{vipDeatil.money}}</view>
			</view>
			<!-- <view class="cont-list">
				<view style="color: #8A8A8A;">店铺</view>
				<view style="color: #FF9244;">{{store_name}}</view>
			</view> -->
			<view class="cont-list" @click="youhuiquan">
				<view style="color: #8A8A8A;">使用优惠券</view>
				<view>
					<text style="color: #A3A3A3;" v-if="cut_price>0">优惠{{cut_price}}元</text>
					<text style="color: #A3A3A3;" v-else>使用优惠券</text>
					<u-icon color="#A3A3A3" name="arrow-right"></u-icon>
				</view>
			</view>
			<view style="color: #A3A3A3;font-size: 28rpx;padding-top: 10rpx;">温馨提示：您正在购买<text style="color: #FF9244;">{{store_name}}</text>的会员卡</view>
		</view>

		<view class="gang"></view>

		<view class="pay-box">
			<view style="font-size: 36rpx;font-weight: 600;color: #323232;">支付方式</view>
			<view style="display: flex;align-items: center;justify-content: space-between;padding-top: 20rpx;" v-for="(it,i) in payArr"
			 :key="i" @click="payClick(it.pay_type)">
				<view style="display: flex;align-items: center;">
					<!-- <image style="width: 38rpx;height: 36rpx;" :src="it.logo"></image> -->
					<text class="iconfont weixin-icon" v-if="it.pay_type == 1">&#xe6ea;</text>
					<text class="iconfont yue-icon" v-if="it.pay_type == 3">&#xe66e;</text>
					<view style="padding-left: 10rpx;">{{it.title}} <text v-if="it.pay_type == 3" style="padding-left: 10rpx;font-size: 24rpx;color: #A8A8A8;">(可用余额:￥{{userinfo.money}})</text>
					</view>
				</view>
				<radio :checked="it.pay_type == pay_type" color="#FF723B"></radio>
			</view>
		</view>

		<view class="but">
			<view style="font-size: 30rpx;color: #323232;">总价：￥<text style="color: #FF4E4E;font-size: 46rpx;">{{(vipDeatil.money - cut_price).toFixed(2)}}</text>
			</view>
			<view class="but-nut" @click="lijiBuy">
				立即购买
			</view>
		</view>


		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="pop-box">
				<image class="pop-img" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vip_rule.png" mode=""></image>
				<view class="pop-cont">
					<scroll-view scroll-y="true">
						<view class="pop-qy">
							<view class="qy-dot"></view>
							<p v-html="vipDeatil.content"></p>
						</view>
					</scroll-view>
				</view>
				<view class="close-box">
					<image @click="close" class="close-img" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/close_pop.png"
					 mode=""></image>
				</view>
			</view>
		</uni-popup>

		<!-- 优惠券弹窗 -->
		<u-popup v-model="yhq_show" height="620rpx" border-radius="20" mode="bottom">
			<view class="up-boxs">
				<view class="up-title">
					<view style="color: #999;" @click="upClose">取消</view>
					<view class="">优惠券</view>
					<view style="color: #FF723B;" @click="upConfrim">确定</view>
				</view>

				<scroll-view scroll-y="true" style="height: 500rpx;" @scrolltolower="scrolltolower">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<view v-for="(it,i) in coupArr" :key="i" class="coupon-list" @click="xuanzeCoup(it, i)" v-if="coupArr.length>0">
							<view class="coupon-bg">
								<u-image width="700" height="222" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yhq_bg.png"></u-image>
							</view>

							<view class="coupon-text">
								<view class="coupon-left">
									<view style="color: white;">
										<text style="font-size: 38rpx;">￥</text>
										<text style="font-size: 67rpx;">{{it.cut_price}}</text>
									</view>
									<view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;">
										优惠券
									</view>
								</view>
								<view class="coupon-right">
									<view class="two-line" style="color: #0D0D0D;font-size: 30rpx;font-weight: 600;width: 260rpx">
										{{it.title}}
									</view>
									<view style="font-size: 22rpx;color: #969696;padding-top: 30rpx;">
										{{it.end_time}}
									</view>
									<view class="coupon-tip one-line" v-if="it.name == '平台'">({{it.name}}优惠券)</view>
									<view class="coupon-tip one-line" v-else>(仅{{it.name}}使用)</view>
								</view>
							</view>

							<view style="position: absolute;top: 30rpx;right: 40rpx;" v-show="coupId == it.id">
								<u-icon name="checkmark-circle-fill" color="#FF723B" size="50"></u-icon>
							</view>
							<view class="finished">—— 没有更多了 ——</view>
						</view>

						<view class="zanwu-data" v-if="coupArr.length==0">暂无可使用优惠券</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				payArr: [{
						title: '微信支付',
						pay_type: 1
					},
					{
						title: '余额现金',
						pay_type: 3
					}
				],
				vipColor: [{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yuekabg.png',
						color: '#FF9344'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yuekabg.png',
						color: '#FF9344'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/studykabg.png',
						color: '#1C0000'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/year_card.png',
						color: '#B58262'
					}
				],
				checked: true,
				qyList: [{
						text: '月卡150元 | 季卡：675元 | 年卡：1800元'
					},
					{
						text: '春夏季日洗2件衣服，床品一周一套（不包 含内衣裤等）秋冬季日洗3件衣服，床品一 周一套 (不包含内衣裤等）'
					},
					{
						text: '本卡仅限于洗衣用途，不能用于其它'
					},
					{
						text: '本卡购买后不可退换'
					}
				],
				maskType: 0,
				vip_id: '',
				vipDeatil: '',
				pay_type: 1,
				userinfo: '',
				yhq_show: false,
				coupArr: [],
				coupId: '',
				cut_price: 0,
				coupIndex: '',
				store_id: '', // 店铺id
				store_name: ''
			}
		},
		onLoad(options) {
			this.vip_id = options.id
			this.store_id = uni.getStorageSync('store_id')
			this.store_name = uni.getStorageSync('store_name')
			// console.log
			this.getVipDetail()
			this.getUserInfo()
			this.getVipQuanyi()
		},
		methods: {
			radioChange(e) {
				console.log(e)
			},
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getVipDetail() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/recharge/cardInfo', {
					id: this.vip_id,
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.vipDeatil = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 会员权益
			getVipQuanyi() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/explain/info', {}, false).then(res => {
					if (res.data.code == 200) {
						this.qyList = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getCoupons() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/coupon/info', {
					page: this.page,
					size: 10,
				}, true).then(res => {
					if (res.data.code == 200) {
						let arr = []
						if (this.page == 1) {
							arr = res.data.data
						} else {
							arr.push.apply(arr, res.data.data)
							if (res.data.data.length < 10) this.total = true
						}
						arr.filter((it, i) => {
							if (it.type == 0 && it.condition_price <= this.vipDeatil.money) {
								if (it.store_id == this.store_id || it.store_id == 0) this.coupArr.push(it)
							}
						})
						console.log(this.coupArr)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			scrolltolower() {
				if (this.total) return false
				this.page++
				this.getCoupons()
			},

			// 确认支付
			lijiBuy() {
				let self = this
				uni.showModal({
					title: '确认支付',
					content: '',
					success(res) {
						if (res.confirm) {
							self.payments()
						} else {
							uni.showToast({
								title: '取消支付',
								icon: 'none'
							})
						}
					}
				})
			},
			// 支付
				payments() {
				let self = this
				self.$ajaxRequest.post(self.baseUrl + 'shop/order/info', {
					type: 6,
					pay_type: self.pay_type,
					card_id: self.vip_id,
					coupon_id: self.coupId,
					store_id: self.store_id
				}, true).then(res => {
					if (res.data.code == 200) {
						console.log(res)
						self.$ajaxRequest.post(self.baseUrl + 'shop/order/pay', {
							order_id: res.data.data.order_id,
							pay_type: self.pay_type
						}, true).then(result => {
							console.log(result)
							if (result.data.code == 201 || result.data.code == 200) {
								if (self.pay_type == 1) { // 微信支付
									uni.getProvider({
										service: 'payment',
										success: function(payRes) {
											if (~payRes.provider.indexOf('wxpay')) {
												uni.requestPayment({
													provider: 'wxpay',
													timeStamp: result.data.data.timeStamp,
													nonceStr: result.data.data.nonceStr,
													package: result.data.data.package,
													signType: result.data.data.signType,
													paySign: result.data.data.paySign,
													success: function(res) {
														console.log('success:' + res);
														uni.showToast({
															title: '支付成功',
															icon: 'none'
														})
														uni.navigateBack({
															delta: 1
														})
													},
													fail: function(err) {
														console.log(err);
														self.cut_price = 0
														self.coupId = ''
														self.getVipDetail()
														uni.showToast({
															title: '支付失败',
															icon: 'none'
														})
													}
												});
											}
										}
									});
								} else { // 余额支付
									uni.navigateBack({
										delta: 1
									})
									// uni.showToast({
									// 	title:'支付成功，正在跳转页面...'
									// })
									// setTimeout(() => {

									// }, 200)
								}
							} else {
								uni.showToast({
									title: result.data.msg,
									icon: 'none'
								})
							}


						})

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			payClick(i) {
				this.pay_type = i
			},
			xuanzeCoup(it, i) {
				console.log(it.condition_price, this.vipDeatil.money)
				this.coupId = it.id
				this.coupIndex = i
			},
			youhuiquan() {
				this.yhq_show = true
				this.page = 1
				this.coupArr = []
				this.getCoupons()
			},
			upClose() {
				self.cut_price = 0
				self.coupId = ''
				this.getVipDetail()
				this.yhq_show = false
			},
			upConfrim() {
				this.yhq_show = false
				this.cut_price = this.coupArr[this.coupIndex].cut_price

			},
			quanyi() {
				this.maskType = 2
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
	.vip-tips-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx 30rpx 0rpx 30rpx;
	}

	.card-line {
		color: #FFD4BE;
		padding: 0 20rpx;
	}

	.card-text {
		font-size: 34rpx;
		color: #FFD4BE;
		padding-right: 15rpx;
	}

	.but-nut {
		width: 300rpx;
		height: 100rpx;
		background-color: #F3B375;
		color: #7D3917;
		font-size: 30rpx;
		font-weight: 600;
		text-align: center;
		line-height: 100rpx;
		margin-left: 20rpx;
	}

	.but {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		border-top: 1rpx solid rgba(167, 167, 167, .2);
		height: 90rpx;
	}

	.pay-box {
		padding: 30rpx;
	}

	.cont-box {
		padding: 40rpx 30rpx 30rpx 30rpx;
	}

	.gang {
		width: 750rpx;
		height: 20rpx;
		background: #FBF8F9;
	}

	.cont-list {
		font-size: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-bg {
		position: absolute;
		width: 750rpx;
		height: 323rpx;
	}

	.top-box {
		padding-top: 60rpx;
		position: relative;
		z-index: 1;
		width: 690rpx;
		margin-left: 30rpx;
	}

	.top-box-bg {
		position: absolute;
		width: 690rpx;
		height: 404rpx;
	}

	.top-text-box {
		position: relative;
	}

	.pop-box {
		position: relative;
	}

	.pop-img {
		width: 640rpx;
		height: 737rpx;
		/* height: 588rpx; */
	}

	.close-box {
		display: flex;
		justify-content: center;
		padding-top: 46rpx;
	}

	.close-img {
		width: 60rpx;
		height: 60rpx;
	}

	.pop-cont {
		position: absolute;
		top: 100rpx;
		left: 0;
		width: 100%;
		padding-left: 30rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
	}

	.pop-qy {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #FBF8F9;
	}

	.qy-dot {
		top: 20rpx;
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 128, 62, 1);
		border-radius: 50%;
		margin-right: 25rpx;
		transform: translateY(15rpx);
	}

	.qy-text {
		width: 556rpx;
		/* font-size: 30rpx; */
		color: #575757;
	}

	.dq-word {
		width: 542rpx;
		text-align: center;
		font-size: 34rpx;
		color: #333;
		margin: auto;
		padding-top: 68rpx;
		padding-bottom: 86rpx;
		line-height: 50rpx;
		font-weight: 500;
	}

	.dq-btn {
		width: 360rpx;
		height: 90rpx;
		background: linear-gradient(-17deg, rgba(241, 220, 170, 1), rgba(236, 212, 152, 1));
		box-shadow: 1rpx 4rpx 10rpx 3rpx rgba(237, 214, 156, 0.39);
		border-radius: 10rpx;
		text-align: center;
		line-height: 90rpx;
		margin: auto;
		font-size: 30rpx;
		color: #6E442C;
		font-weight: 700;
	}

	.up-boxs {
		position: relative;
	}

	.up-title {
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
		text-align: center;
		padding: 30rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f8f8f8;
		background: #fff;
		z-index: 9;
	}

	.up-btns {}

	@font-face {
		font-family: 'iconfont';
		src: url('data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQ0AA0AAAAACKwAAAPfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCUhEICoRwhBoLDgABNgIkAxQEIAWFCAdIG2EHUZQvSpjsY/XlHEWS3IyH//b73z4zc+WbJk0mobvhVaxkFglCJlG6h0IimZTwfnhPe0nGZEZvotuJbQegGcGD9UX9yYpL9Su+P8h+jb1agC618U9Egq1QOBiBBhaqjWLV/sEDFExUg5SBeU5OkKJxnIWAz9OqXIAv5Xmz3LUR9GIcSEJWCQUJUSBeATvpBXodwEvg9fEfDIILJFUGbuLpfecEsPsl+OYDxvrPggiGAQdBADIyJiDgECYwgc060Golfgm+SX/z4f9/UGolf0j2SkoDAvKIGgRvIgHJzxOA/xCd/4CCGvSiF58AYhgAFABkWT0zE8d5ePQFcFwE5y5h9c9P43yNu4uDCEbeI/ib7gDgjbdhQHLggCAgiueaZfDRBeUZyRByqWmBNd+4iBQ8eEC9fz/o0aPghw9DHz6ksT4LEQ7QmmZY/WI4DN+XQ/BZOXKOIBDarNSQKkEbHFvakaQGD80pz4xIBBE9PaxukSAoCVm8Z0qlPXoUN7uYQhTQDFWJxdAZAp4dFHyBIFbDm06wjivNniRPBfF+gyss9QyFTjE/Ce0L8dS9EnqprKC0r6SgXPlE+ZgSV2emusKTNTJ2S+NRs4egvbjHa48LQvXK9UoNyg1C0PIy2ihrF7IhmyZlo3bi+Dm0FW07fpY/AOu5eqEf68NAAmWs++pFMhDkjls0Xn75b7fjjfEI0DSKPyMgwMMXT4mDMzIypz2c8ieQe1ztPk3UZtYLNS6E9C33vP2H8u92HMiDHSKCpq+0kgiJAATl0DT8bPTO4xgDCU97Fc+MkbSYQ90j3SVxEe++nADkCa/lsKKz4z0oP4VxVFmFjKA3VzAS/G/VeqvIheeZ2ljjkU3XpKlm1PFtmqn/y4p1duC7TUXN6AAQCM7evH8ZzW/1m4tgg3bgMOg8Z4O8AKCVQFB3RykApSZJpfilBxSOxACB2gEOkNCtGx0Qw14Ckh+jpSG0LpE0niFrPWeL+BqVHm9Ra31Ft6VwWN5jJHoBE4UbWAQAwiAHJP3uIRuUxxaxHZVxS6gNuoVu1z5M7zEb6YDbkI0uVq6gT0ARp8iaJF6GdIw+uXC6tyb8XYT/CfvOECgNzssBztEx5UkVKxs8QNeu//Yp6zW6bDmSKin06dADU9fe9XX0wrI7xPjDN63mJTnyMRnIlYuBgiFbhjQULnF8gi5VqgwUmbJlSEYXL5cO2PcozMlnGuTmMia7/iO+/jFn+DFkG+Bh8sQNZ0GXLkbCto74LFMwF0kxQvs780g/0Y1u7P01QgoUwRA2jqyk2LjYDKIoKZ35Xx9jivLoHAX0pMKkdAA=') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 40rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-qiabao:before {
		content: "\e611";
	}

	.icon-yingshouyue:before {
		content: "\e66e";
	}

	.icon-weixin:before {
		content: "\e6ea";
	}

	.weixin-icon {
		color: #4FB674;
	}

	.card-icon {
		color: #405EDD;
	}

	.yue-icon {
		color: #FF723B;
	}

	.coupon-list {
		margin-top: 20rpx;
		position: relative;
		width: 700rpx;
		height: 222rpx;
	}

	.coupon-bg {
		position: absolute;
	}

	.coupon-text {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.coupon-left {
		height: 222rpx;
		width: 202rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.coupon-tip {
		/* width: 500rpx; */
		font-size: 22rpx;
		color: #969696;
		padding-top: 10rpx;
		padding-right: 10rpx;
	}
	.coupon-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 488rpx;
		height: 202rpx;
		box-sizing: border-box;
		padding-left: 40rpx;
	}
</style>
